<template>
  <div>
    <el-dialog
      v-dialogDrag
      class="dialogClass"
      :title="$t('menu.materielList')"
      model
      top="5vh"
      :visible.sync="openDialog"
      :close-on-click-modal="false"
      width="80%"
      destroy-on-close
      :before-close="handleClose"
    >
      <el-slider v-model="scrollValue" @change="enlargeImg" />
      <div class="dialogForm">
        <search
          ref="inputValue"
          :options="selectData"
          :msg="tacitly"
          @seek="collect"
          @hand="handleMaterielSearch"
        />
        <el-button
          type="primary"
          size="mini"
          class="btn"
          @click="handleMaterielSearch"
        >
          {{ $t('btn.search') }}
        </el-button>
      </div>
      <div>
        <jc-table
          serial
          :table-data="parentTableData"
          table-height="62.8vh"
          :table-header="parentTableHeader"
          @clickRow="parentSelectRow"
        >
          <el-table-column
            :label="$t('market.materImg')"
            prop="FIMG"
            align="center"
            min-width="60px"
          >
            <template slot-scope="scope">
              <el-image
                :src="$img + scope.row.FIMG"
                :preview-src-list="[$img + scope.row.FIMG]"
                class="materielImg"
              />
            </template>
          </el-table-column>
        </jc-table>
        <jc-pagination
          :total="parentPagination.total"
          :page.sync="parentPagination.pageNum"
          :limit.sync="parentPagination.size"
          @pagination="getParentMateriel"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryBomTreeDataList } from '@/api/engineering/createBom'
import { toMxAmina } from '@/components/ToMxamineState'
import searData from '@/components/Search/mixin'
import search from '@/components/Search'

export default {
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 0,
      scrollValue: 60, // 滚动条值
      openDialog: true,
      parentTableData: [],
      // 父项表头
      parentTableHeader: [
        // 搜索编码，物料ID隐藏
        { label: this.$t('market.fmodel'), prop: 'FMODEL' },
        { label: this.$t('market.fmaterial'), prop: 'FNUMBER' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'FSPECIFICATION' },
        {
          label: this.$t('market.descrip'),
          prop: 'FDESCRIPTION',
          minWidth: '150px'
        },
        { label: this.$t('market.fprice'), prop: 'FPRICE' },
        { label: this.$t('market.createDate'), prop: 'FCREATEDATE' }
      ],
      // 父分页
      parentPagination: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        size: 50 // 每页显示多少条数据
      }
    }
  },
  created() {
    this.getParentMateriel()
  },
  methods: {
    // 放大图片
    enlargeImg(item) {
      this.width = item
      this.height = item
    },
    // 搜索
    handleMaterielSearch() {
      this.parentPagination.pageNum = 1
      this.getParentMateriel()
    },
    // 分页
    async getParentMateriel() {
      const { pageNum, size: pageSize } = this.parentPagination
      const DATA = {
        pageNum,
        pageSize,
        isOld: 1,
        fnumberGroup: this.searCollData.fnumber,
        search: this.searCollData
      }
      const { data: RES, total } = await queryBomTreeDataList(DATA)
      this.parentTableData = RES.map(res => {
        return toMxAmina(res)
      })
      this.parentSrcList = RES.map(item => item.FIMG)
      this.parentPagination.total = total
    },
    // 子传父
    parentSelectRow(ev) {
      this.$emit('mater', ev)
    },
    // 关闭前回调
    handleClose() {
      this.pro = {
        FMATERIALID: ''
      }
      this.$emit('mater', this.pro)
    }
  }
}
</script>

<style scoped lang="scss">
.dialogForm {
  position: relative;
  margin-bottom: 15px;
  .btn{
    transform: translateY(18%);
    margin-left: 455px !important;
  }
}
.materielImg {
  max-width: 60px;
  max-height: 30px;
}
</style>

